import { CSSProperties } from 'vue'
import { ButtonProps } from 'element-plus'
import { WatchSizePropsType } from '@xtail/vue3'

export const LayoutSideResponsivePropsType_Name = 'LayoutSideResponsivePropsType'

export type LayoutSideResponsivePropsType = {
  // 侧边栏的宽度
  width?: string
  // 侧边栏折叠时的宽度
  collapseWidth?: string
  // 是否显示内置的 trigger 按钮
  showTrigger?: boolean
  // 内置 trigger 按钮组件 Props
  triggerProps?: Partial<ButtonProps>
  // 侧边栏是否折叠
  collapse?: boolean
  // 侧边栏折叠状态改变时触发的回调函数
  'onUpdate:collapse'?: (collapse?: boolean) => any
  // 侧边栏折叠过渡速度，单位 ms，默认 300ms
  collapseSpeed?: number
  // 监听大小变化组件 Props
  watchSizeProps?: WatchSizePropsType
  // 样式类名
  className?: string | string[]
  // 样式
  style?: string | Partial<CSSProperties>
}
